<template>
  <div class="big">
    <el-table
      :data="tableData"
      style="width: 55.1%;text-align: center;"
      border
      stripe
    >
      <el-table-column prop="_id" label="管理员编号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="password" label="密码" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="formInline.name" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formInline.password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addAdmin">确认新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [
        {
          _id: "00",
          name: "zs",
          password: "123",
        },
        {
          _id: "01",
          name: "ls",
          password: "456",
        },
      ],
      formInline: {
        name: "",
        password: "",
      },
    };
  },
  created() {
    //页面一加载就渲染管理员列表
    this.renderAdmin();
  },
  methods: {
    //渲染管理员列表
    async renderAdmin() {
      let { data } = await axios.get("/admin/getAdmin");
      this.tableData = data;
    },
    //新增管理员
    async addAdmin() {
      let { data } = await axios.post("/admin/addAdmin", this.formInline);
      console.log(data);
      if (data) {
        this.renderAdmin();
        this.formInline = {};
      }
    },
    //修改管理员
    async handleEdit(index, row) {
      this.$router.push(`/AdminSystem1/AdminUpdate/${row._id}`);
    },
    //删除管理员
    async handleDelete(index, row) {
      let data = await axios.post('/admin/deleteAdmin',{ _id: row._id });
      if(data) {
        this.renderAdmin();
      }
    },
  },
};
</script>

<style>
* {
  text-align: center;
}
.big {
  width: 100%;
  height: 100%;
}
.el-table {
  margin: 0 auto;
}
.el-table th,
.el-table tr {
  height: 40px;
  line-height: 40px;
}
.has-gutter,
.el-table__body {
  width: 100%;
}
.el-form-item__content {
  margin-top: 63px;
}
</style>
